<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-07-11 11:15:04
 * @LastEditTime: 2024-07-12 16:56:27
 * @FilePath: \面试题-刘琳\前端面试题1\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>刘琳-面试题1</title>

  <link rel="stylesheet" href="demo-files/demo.css">
  <link rel="stylesheet" href="style.css"></head>
  <link rel="stylesheet" href="index.css" id="stylesheet">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <ul ref="ulList" class="chart-list">
      <li v-for="item in sites" >
        <div class="chart-item">
          <img class="item-img" :src="item.imgUrl" alt=""/>
          <p class="title">{{item.title}}</p>
          
          <div class="extra">
            <div>
              <button>编辑</button>
            </div>
            <div class="extra-icons">
              <span class="icon-favorite"></span>
              <span class="icon-delete"></span>
            </div>
          </div>
        </div>
      </li>

      <li v-for="item in hideArr" >
        <div class="chart-hidden">
        </div>
      </li>
    </ul>
  </div>
</div>
  
<script>
  new Vue({
    el: '#app',
    data: {
      sites: [
        {imgUrl: './image/circle.png', title: '各个区域-扇形图'},
        {imgUrl: './image/column.png', title: '正负条形图-数据标签'},
        {imgUrl: './image/combination.png', title: '正负条形图-数据标签'},
        {imgUrl: './image/line.png', title: '正负堆积条形图'},
        {imgUrl: './image/pivottable.png', title: '测试-数据透视表'},
        {imgUrl: './image/scatter.png', title: '有告警的-散点图'},
        {imgUrl: './image/stackedbarcolumn.png', title: 'x轴-正负堆积条形图-'},
        {imgUrl: './image/stackedcolumn.png', title: 'y轴-正负堆积条形图'},
        {imgUrl: './image/circle.png', title: '各个区域-扇形图'},
        {imgUrl: './image/column.png', title: '正负条形图-数据标签'},
        {imgUrl: './image/combination.png', title: '正负条形图-数据标签'},
        {imgUrl: './image/line.png', title: '正负堆积条形图'},
        {imgUrl: './image/pivottable.png', title: '测试-数据透视表'},
        {imgUrl: './image/scatter.png', title: '有告警的-散点图'},
        {imgUrl: './image/stackedbarcolumn.png', title: 'x轴-正负堆积条形图-'},
        // {imgUrl: './image/stackedcolumn.png', title: 'y轴-正负堆积条形图'},
      ],
      hideArr: [], // 占空数据
      count: 4
    }, 
    watch:{
      'sites': 'countSize',
    },
    mounted () {
      this.countSize()
      window.addEventListener('resize', this.countSize)
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.countSize)
    },
    methods: {
      countSize () {
        this.$nextTick(() => {
          setTimeout(() => {
            this.hideArr = []
            let ulListWidth = this.$refs.ulList.clientWidth
            let singleWidth = 256
            let count = Math.floor(ulListWidth / singleWidth)
            this.count = count
            let yushu = this.sites.length % count
            if (yushu === 0) return
            if (this.sites.length < count) {
              this.hideArr = []
              for (let i = 0; i < count - this.sites.length; i++) {
                this.hideArr.push(1)
              }
            } else {
              this.hideArr = []
              for (let i = 0; i < count - yushu; i++) {
                this.hideArr.push(1)
              }
            }
          })
        }, 100)
      },
    }
  })
</script>
</body>
</html>